<template>
	<el-container>
		<el-aside width="150px" v-loading="showGrouploading">
			<el-container>
				<el-main class="nopadding">
					<div class="status-items">
						<a href="javascript:;" :key="l.value" v-for="(l, index) in groupList" @click="statusChange(index)"	:class="l.checked ? 'on' : ''">
							{{ l.label }}</a>
					</div>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-form inline v-model="search" label-position="right">
							<el-form-item label="关键词">
								<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter
							   :params="tableParams" :column="tableColumn">
					<template #order_info="scope">
						<order-info-box :orderRow="scope.row" :baseUrl="baseUrl" />
					</template>
					<template #buy_info="scope">
						<buy-info :orderRow="scope.row" />
					</template>
					<template #fenxiao_info="scope">
						<div
							class="fenxiao-sub-order"
							style="border-bottom: 1px solid #e7e5e5; padding: 3px 0"
							v-for="(sub, si) in scope.row.subs" :key="si"
						>
							<money-info-box :level-num="1" :order-sub-row="sub" />
							<money-info-box :level-num="2" :order-sub-row="sub" />
							<money-info-box :level-num="3" :order-sub-row="sub" />
						</div>
					</template>
					<template #status="scope">
						<div>
							{{ $TOOL.getStatusText(scope.row.status) }}
						</div>
						<div>
							{{ getFenxiaoOrderStatusText(scope.row.subs[0].fo_status) }}
						</div>
						<div
							v-if="
									scope.row.subs[0].fo_status == 90 &&
									scope.row.subs[0].fo_settle_accounts_at > 0
								"
						>
							结算时间：<br />
							{{ showDateTime(scope.row.subs[0].fo_settle_accounts_at) }}
						</div>
					</template>
				</scTableGdshop>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import dayjs from "dayjs";
import moneyInfoBox from "./moneyInfoBox.vue";
import buyInfo from "../shop/order/orderBuyInfo.vue";
import orderInfoBox from "../shop/order/orderInfoBox.vue";

export default {
	name: "fenxiao-order",
	components: {
		moneyInfoBox,
		buyInfo,
		orderInfoBox
	},
	data() {
		return {
			showGrouploading: false,
			apiObj: this.$API.fenxiao.order,
			baseUrl: '',
			groupList: [
				{
					label: "全部",
					value: 0,
					checked: false
				},
				{
					label: "待结算",
					value: 1,
					checked: true
				},
				{
					label: "订单关闭",
					value: 10,
					checked: false
				},
				{
					label: "可结算",
					value: 90,
					checked: false
				},
				{
					label: "已结算",
					value: 99,
					checked: false
				}
			],
			tableParams: {
				list_type: 1,
			},
			search: {
				keyWord: "",
			},
			tableColumn: [
				{
					prop: "order_info",
					label: "订单",
					align: "left"
				},
				{
					prop: "buy_info",
					label: "买家",
					width: 100
				},
				{
					prop: "fenxiao_info",
					label: "分销信息",
					align: "left",
					width: 200
				},
				{
					prop: "status",
					label: "状态",
					width: 140
				}
			]
		}
	},
	mounted() {
		this.getBaseUrl()
	},
	methods: {
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API)
			console.log(this.baseUrl)
		},
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		showDateTime(_time) {
			if (!_time) {
				return "-";
			}
			return dayjs.unix(_time).format("YYYY-MM-DD HH:mm:ss");
		},
		getFenxiaoOrderStatusText(_status) {
			_status = _status.toString();
			switch (_status) {
				case "1":
					return "冻结";
				case "10":
					return "订单关闭";
				case "90":
					return "可结算(等待期)";
				case "99":
					return "已结算";
			}
			return "";
		},
		statusChange(index) {
			this.groupList.map((e,i) => {
				e.checked = index === i
				if (e.checked) {
					this.tableParams.list_type = e.value
				}
			})
			this.$refs.table.refresh();
		},
	}
}
</script>

<style lang="scss" scoped>
.status-items{margin-top: 10px;}
.status-items a{
	display: block;
	line-height: 36px;
	text-align: center;
	color: #000;
	background-color: #fff;
	margin-bottom: 1px;
	font-size: 12px;
	&:hover {
		background-color: #85a1f8;
		color: #fff;
	}
	&.on {
		background-color: #ecf5ff;
		color: #409eff;
	}
}
.goods-stock-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.goods-price {
	color: #f56c6c;
}
.btn-edit {
	i {
		cursor: pointer;
		&:hover {
			color: #00a0e9;
		}
	}
}
.goods-price-box {
	text-align: center;
	.btn-edit {
		position: absolute;
		margin-top: -25px;
		right: 10px;
	}
}
.active {
	display: none;
}
.hover-btn:hover {
	.active {
		display: inline;
	}
}
.right-panel-search{
	.el-form-item--default{margin-bottom: 0;}
}
</style>
